<@app.html>
    <@app.head>
    <script>
        $(function () {
            $('#page_table').datagrid({
                fit: true,
                striped: true,
                url: "${contextPath}/security/hdw/report/page.htm?flag=" +${flag},
                fitColumns: true,
                singleSelect: true,
                selectOnCheck: false,
                checkOnSelect: false,
                autoRowHeight: false,
                rowStyler: gridRowStyler,
                columns: [
                    [
                        {
                            title: '运营商',
                            align: 'center',
                            field: 'agentName',
                            width: 60
                        },
                        {
                            title: '代理商',
                            align: 'center',
                            field: 'agencyName',
                            width: 60
                        },
                        {
                            title: '换电柜',
                            align: 'center',
                            field: 'cabinetId',
                            width: 60
                        },
                        {
                            title: '日期',
                            align: 'center',
                            field: 'statsDate',
                            width: 60
                        },
                        {
                            title: '总收入(元)',
                            align: 'center',
                            field: 'money',
                            width: 60,
                            formatter: function (val, row) {
                                return new Number(val / 100).toFixed(2);
                            }
                        },
                        {
                            title: '换电收入(元)',
                            align: 'center',
                            field: 'chargeMoney',
                            width: 60,
                            formatter: function (val, row) {
                                return new Number(val / 100).toFixed(2);
                            }
                        },
                        {
                            title: '订单数',
                            align: 'center',
                            field: 'orderCount',
                            width: 60
                        },
                        {
                            title: '更新时间',
                            align: 'center',
                            field: 'updateTime',
                            width: 60
                        }
                    ]
                ],
                onLoadSuccess: function () {
                    $('#page_table').datagrid('clearChecked');
                    $('#page_table').datagrid('clearSelections');
                    countTotal();
                }
            });
            $('#datetime').datebox({
                onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
                    span.trigger('click'); //触发click事件弹出月份层
                    //fix 1.3.x不选择日期点击其他地方隐藏在弹出日期框显示日期面板
                    if (p.find('div.calendar-menu').is(':hidden')) p.find('div.calendar-menu').show();
                    if (!tds) setTimeout(function () {//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
                        tds = p.find('div.calendar-menu-month-inner td');
                        tds.click(function (e) {
                            e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件
                            var year = /\d{4}/.exec(span.html())[0]//得到年份
                                    , month = parseInt($(this).attr('abbr'), 10); //月份，这里不需要+1
                            if(month<10){
                                month="0"+month;
                            }
                            $('#datetime').datebox('hidePanel')//隐藏日期对象
                                    .datebox('setValue', year + '-' + month); //设置日期的值
                        });
                    }, 0);
                    yearIpt.unbind();//解绑年份输入框中任何事件
                },
                parser: function (s) {
                    if (!s) return new Date();
                    var arr = s.split('-');
                    return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
                },
                formatter: function (d) {
                    return d.getFullYear() + '-' + (d.getMonth() + 1);
                    /*getMonth返回的是0开始的，忘记了。。已修正*/
                }
            });
            var p = $('#datetime').datebox('panel'), //日期选择对象
                    tds = false, //日期选择对象中月份
                    aToday = p.find('a.datebox-current'),
                    yearIpt = p.find('input.calendar-menu-year'),//年份输入框
            //显示月份层的触发控件
                    span = aToday.length ? p.find('div.calendar-title span') ://1.3.x版本
                            p.find('span.calendar-text'); //1.4.x版本
            if (aToday.length) {//1.3.x版本，取消Today按钮的click事件，重新绑定新事件设置日期框为今天，防止弹出日期选择面板

                aToday.unbind('click').click(function () {
                    var now = new Date();
                    $('#datetime').datebox('hidePanel').datebox('setValue', now.getFullYear() + '-' + (now.getMonth() + 1));
                });
            }
        })

        function countTotal() {
            var rows = $('#page_table').datagrid('getRows')//获取当前的数据行
            var totalMoney = 0, totalCount = 0;
            for (var i = 0; i < rows.length; i++) {
                totalMoney += (rows[i]['money'] || 0);
                totalCount += (rows[i]['orderCount'] || 0);
            }
            $('#countMoney').val(new Number(totalMoney / 100).toFixed(2))
            $('#countTotal').val(totalCount)
        }

        function query() {
            var datagrid = $('#page_table');
            var agentId = $('input[name="agentId"]').val();
            var agencyId = $('input[name="agencyId"]').val();
            var cabinetId = $('input[name="cabinetId"]').val();
            var statsDate = $('input[name="statsDate"]').val();
            var queryParams = {
                agentId: agentId,
                agencyId: agencyId,
                cabinetId: cabinetId,
                statsDate: statsDate,
                flag: ${flag}
            };

            datagrid.datagrid('options').queryParams = queryParams;

            datagrid.datagrid('load');
        }
    </script>
    </@app.head>

    <@app.body>

        <@app.container>
            <@app.banner/>

        <div class="main">
            <@app.menu/>

            <div class="content" style="overflow:visible">
                <div class="panel search">
                    <div class="float_right">
                        <button class="btn btn_yellow" onclick="query()">搜索</button>
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <#if Session['SESSION_KEY_USER'].type == Session['USER_TYPE_PLATFORM'].value>
                                <td align="right">运营商：</td>
                                <td>
                                    <input name="agentId" class="easyui-combotree" editable="false"
                                           style="width: 184px; height: 28px;"
                                           data-options="url:'${contextPath}/security/basic/agent/tree.htm?dummy=${'所有'?url}',method:'get',onSelect: function(rec){
                               var url = '${contextPath}/security/hdw/agency/tree.htm?dummy=${'所有'?url}&agentId='+rec.id;
                               $('#agency_id').combotree('reload', url);},
                               onChange:function(){
                               $('#cabinet_id').combotree('clear');
                               $('#agency_id').combotree('clear');}"/>
                                </td>
                            </#if>
                            <#if Session['SESSION_KEY_USER'].type == Session['USER_TYPE_AGENT'].value||Session['SESSION_KEY_USER'].type == Session['USER_TYPE_PLATFORM'].value>
                                <td align="right">代理商：</td>
                                <td>
                                    <input name="agencyId" class="easyui-combotree" editable="false" id="agency_id"
                                           data-options="url:'${contextPath}/security/hdw/agency/tree.htm?dummy=${'所有'?url}&agentId=${Session['SESSION_KEY_USER'].agentId}',method:'get',onSelect: function(rec){
                               var url = '${contextPath}/security/hdw/cabinet/tree.htm?dummy=${'所有'?url}&agencyId='+rec.id;
                               $('#cabinet_id').combotree('reload', url);},
                               onChange:function(){
                               $('#cabinet_id').combotree('clear');}"
                                           style="width: 184px; height: 28px;"/>
                                </td>
                            </#if>
                            <td align="right">柜子：</td>
                            <td>
                                <input name="cabinetId" class="easyui-combotree" editable="false" id="cabinet_id"
                                       data-options="url:'${contextPath}/security/hdw/cabinet/tree.htm?dummy=${'所有'?url}&agencyId=${Session['SESSION_KEY_USER'].agencyId}',method:'get'"
                                       style="width: 184px; height: 28px;"/>
                            </td>
                            <td align="right">时间：</td>
                            <td>
                                <input style="height: 30px" class="easyui-datebox" editable="false" id="datetime"
                                       name="statsDate"/>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="panel grid_wrap">
                    <div class="float_right">
                        <table cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td align="right">总收入：</td>
                                <td>
                                    <input type="text" class="text easyui-validatebox" disabled id="countMoney"/>
                                </td>
                                <td align="right">总单数：</td>
                                <td>
                                    <input type="text" class="text easyui-validatebox" disabled id="countTotal"/>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="grid">
                        <table id="page_table"></table>
                    </div>
                </div>
            </div>
        </div>
        </@app.container>
    </@app.body>
</@app.html>
